<template>
    <div class="center-div">
        <el-container>
            <el-header :height="headerHeight">
                <el-row class="header-row">
                    <div>
                        <el-text style="font-size: 25px; font-weight: bold;">MY 导航</el-text>
                    </div>
                    <!-- 塞一个弹簧 使之后的元素往右靠 （flex-grow可拉伸元素确保当前行没有盈余空间）-->
                    <div style="flex-grow: 1;"></div>
                    <!-- 黑暗模式 -->
                    <el-col :span="2" class="center">
                        <el-switch v-model="isDark" @click="toggleDark()" inline-prompt active-text="暗色"
                                   inactive-text="亮色" size="large"></el-switch>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <!-- 左侧菜单 -->
                <el-aside :width="asideWidth">
                    <el-menu :router="true" :collapse="isCollapse"
                             :collapse-transition="false"
                             :default-active="activeMenu" popper-effect="light">
                        <el-menu-item :index="vueRouteDefine.homePage">
                            <el-icon>
                                <HomeFilledIcon/>
                            </el-icon>
                            <template #title>
                                首页
                            </template>
                        </el-menu-item>
                        <el-menu-item :index="vueRouteDefine.appManager">
                            <el-icon>
                                <MenuIcon/>
                            </el-icon>
                            <template #title>
                                应用
                            </template>
                        </el-menu-item>

                        <el-menu-item :index="vueRouteDefine.quickJump" v-if="checkPermission('quickJump:*')">
                            <el-icon>
                                <PromotionIcon/>
                            </el-icon>
                            <template #title>
                                导航
                            </template>
                        </el-menu-item>
                        <el-menu-item :index="vueRouteDefine.article" v-if="checkPermission('article:*')">
                            <el-icon>
                                <PaperclipIcon/>
                            </el-icon>
                            <template #title>
                                文章
                            </template>
                        </el-menu-item>
                        <el-sub-menu index="sub_menu_1" v-if="checkPermission('user:*') && checkPermission('role:*')">
                            <template #title>
                                <el-icon>
                                    <UserFilledIcon/>
                                </el-icon>
                                <span>用户</span>
                            </template>
                            <el-menu-item :index="vueRouteDefine.userManager" v-if="checkPermission('user:*')">
                                用户管理
                            </el-menu-item>
                            <el-menu-item :index="vueRouteDefine.roleManager" v-if="checkPermission('role:*')">
                                角色管理
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item :index="vueRouteDefine.setting">
                            <el-icon>
                                <SettingIcon/>
                            </el-icon>
                            <template #title>
                                设置
                            </template>
                        </el-menu-item>
                        <el-menu-item @click="logout">
                            <el-icon>
                                <SwitchButtonIcon/>
                            </el-icon>
                            <template #title>
                                注销
                            </template>
                        </el-menu-item>
                    </el-menu>
                    <el-button style="position:fixed;left:0;bottom:0" @click="collapse" link>
                        <el-icon v-if="!isCollapse" size="40px">
                            <FoldIcon/>
                        </el-icon>
                        <el-icon v-else size="40px">
                            <ExpandIcon/>
                        </el-icon>
                    </el-button>
                </el-aside>
                <!-- 中心操作面板 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {ref, inject, computed, provide, Ref, watch} from 'vue'
import {
    SwitchButton as SwitchButtonIcon,
    Menu as MenuIcon,
    UserFilled as UserFilledIcon,
    Setting as SettingIcon,
    Promotion as PromotionIcon,
    Fold as FoldIcon,
    Expand as ExpandIcon,
    Paperclip as PaperclipIcon,
    HomeFilled as HomeFilledIcon
} from '@element-plus/icons-vue'
import {vueRouteDefine, vueRouter} from '../assets/ts/my-vue-router'
import {myAxios} from '../assets/ts/my-axios'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useLoginStore} from '../assets/ts/login';
import {useToggle} from '@vueuse/core'
import {checkPermission} from '../assets/ts/permission-util'


const loginStore = useLoginStore()

// 注销
function logout() {
    ElMessageBox.confirm(
        '确认退出登录？',
        '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    )
        .then(() => {
            myAxios.post('/login/logout', {})
                .then((response: any) => {
                    if (response.data.code == 0) {
                        ElMessage.success("注销成功")
                        loginStore.$reset()
                        vueRouter.replace({name: 'login'})
                    } else {
                        ElMessage.error(response.data.message)
                    }
                }).finally(() => {
            })
        })
        .catch(() => {
            // 啥都不用干
        })

}

// 头高度
const headerHeight = ref('50px');

// 左边栏宽度
const asideWidth = computed(() => {
    return isCollapse.value ? '60px' : '150px'
});

// 黑暗模式
const isDark = inject('isDark')

function toggleDark() {
    useToggle(isDark)
}

// 菜单折叠
const verticalScreen: Ref<boolean> = inject('verticalScreen', ref(false))
const isCollapse = ref(verticalScreen.value)

function collapse() {
    isCollapse.value = !isCollapse.value
}

watch(verticalScreen, () => {
    isCollapse.value = verticalScreen.value
})

// 激活菜单选项
const activeMenu = ref(vueRouteDefine.homePage)

provide('activeMenu', activeMenu)

</script>

<style scoped>
.el-header {
    border-bottom: solid 1px var(--el-menu-border-color);
    /* padding: 5px 0px; */
}

.el-aside {
    display: flex;
    justify-content: center;
    height: calc(100vh - v-bind(headerHeight));
}

.el-aside .el-menu {
    width: 100%;
}

.common-layer {
    height: 100%;
    width: 100%;
}

.el-main {
    height: calc(100vh - v-bind(headerHeight));
    /* padding: 0; */
}

</style>